<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts';
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            cData: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                chart: null,
                data: null,
                timer: null
            }
        },
        mounted() {
            this.initChart(this.cData);
        },
        watch: {
            'cData': {
                handler: function(e) {
                    
                    this.initChart(e);
                },
                deep: true,
            }
        },
        beforeDestroy() {
            if (!this.chart) {
                clearInterval(this.timer);
                return
            }
            this.chart.dispose()
            this.chart = null;
            this.data = null;
            clearInterval(this.timer);
        },
        methods: {
            initChart(e) {
                this.chart = echarts.init(document.getElementById(this.id));
                this.data = {
                    title: {
                        text: e.title
                    },
                    legend: {
                        data: ['预警分布']
                    },
                    radar: {
                        indicator: [{
                                name: '授信履约',
                                max: 100
                            },
                            {
                                name: '生产经营 ',
                                max: 100
                            },
                            {
                                name: '关联关系',
                                max: 100
                            },
                            {
                                name: '财务状况',
                                max: 100
                            },
                            {
                                name: '重大事项',
                                max: 100
                            }
                        ]
                    },
                    series: [{
                        type: 'radar',
                        data: [{
                            value: [60, 73, 85, 40, 99],
                        }],
                        itemStyle: {
                            color: '#5ad8a6',
                        },
                    }]
                };
                let _this = this;
                _this.chart.setOption(this.data,true);
                // _this.timer = setInterval(function() {
                //     if (!_this.chart) {
                //         return
                //     }
                //     _this.chart.setOption({}, true);
                //     _this.chart.setOption(_this.data, true);
                // }, 10000);
            }
        }
    }
</script>
